<template>
  <view class="weather-container">
    <view class="title">明天天气预报</view>
    
    <!-- 加载中提示 -->
    <view v-if="loading" class="loading">加载中...</view>
    
    <!-- 错误提示 -->
    <view v-if="error" class="error">{{ error }}</view>
    
    <!-- 天气预报展示 -->
    <view v-if="tomorrowWeather" class="weather-card">
      <view class="date">{{ tomorrowWeather.date }}</view>
      <view class="week">{{ tomorrowWeather.week }}</view>
      <view class="temp-group">
        <view class="temp-item">最高温：{{ tomorrowWeather.high }}</view>
        <view class="split">|</view>
        <view class="temp-item">最低温：{{ tomorrowWeather.low }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      error: '',
      tomorrowWeather: null // 存储明天的天气数据
    }
  },
  onLoad() {
    this.getWeatherData(); // 页面加载时请求数据
  },
  methods: {
    getWeatherData() {
      this.loading = true;
      this.error = '';
      
      // 调用uni.request请求天气接口
      uni.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101230501',
        method: 'GET',
        success: (res) => {
          // 接口返回数据结构处理
          if (res.statusCode === 200 && res.data.status === 200) {
            // 明天是数组的第1项（第0项是今天）
            const tomorrow = res.data.data.forecast[1];
            this.tomorrowWeather = {
              date: tomorrow.date, // 日期
              week: tomorrow.week, // 星期
              high: tomorrow.high, // 最高温
              low: tomorrow.low    // 最低温
            };
          } else {
            this.error = '获取天气数据失败';
          }
        },
        fail: (err) => {
          this.error = '网络请求失败，请检查网络';
          console.error('请求失败：', err);
        },
        complete: () => {
          this.loading = false; 
        }
      });
    }
  }
}
</script>

<style scoped>
.weather-container {
  padding: 30rpx;
  text-align: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin: 40rpx 0;
}

.loading, .error {
  font-size: 28rpx;
  margin-top: 100rpx;
}

.error {
  color: #ff4444;
}

.weather-card {
  margin-top: 80rpx;
  padding: 40rpx;
  background: #f5f5f5;
  border-radius: 16rpx;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.date {
  font-size: 32rpx;
  margin-bottom: 20rpx;
}

.week {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.temp-group {
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.temp-item {
  white-space: nowrap; 
}

.split {
  margin: 0 15rpx;
  color: #999;
}
</style>